<template>
	<view class="indexContainer">
		
		<view class="headerWrapper" :style="{backgroundColor: headerBgColor}">
			
			<view class="header">
				
				<SearchBar></SearchBar>
				
				<view class="navHeader">
					<scroll-view class="scrollHeader" scroll-x="true" enable-flex>
						
						<view class="scrollHeaderItem scrollHeaderItemHome" 
									:class="{active: headerNavCurrentIndex === -1}" 
									@click="headerNavCurrentIndex = -1" 
						>首页</view>
						
						<view class="scrollHeaderItem" 
									:class="{active: headerNavCurrentIndex === index}"
									v-for="(headerNav, index) in headerNavList" 
									:key="headerNav.title"
									@click="headerNavCurrentIndex = index"
						>{{headerNav.title}}</view>
						
					</scroll-view>
					
					<view class="iconfont icon-duihao"></view>
				</view>
			</view>
			
		</view>
		
		
		<view class="main">
				
			<scroll-view scroll-y="true" >
					
				<view class="bgBox" :style="{backgroundColor: headerBgColor}" >
					<view class="topBgImg"></view>
				</view>
			
				<view class="bannerSwiper">
					<swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000" 
									@change="$event => headerBgColor = swiperList[$event.detail.current].backgroundColor" >
						<swiper-item v-for="swip in swiperList" :key="swip.id">
							<view class="swiper-item">
								<image :src="swip.mImage" mode=""></image>
							</view>
						</swiper-item>
					</swiper>
				</view>
				
				<view class="tips">
					<view class="tipsItem">
						<text class="iconfont icon-duihao"></text>
						<text>品种更全</text>
					</view>
					
					<view class="tipsItem">
						<text class="iconfont icon-duihao"></text>
						<text>品种更全</text>
					</view>
					
					<view class="tipsItem">
						<text class="iconfont icon-duihao"></text>
						<text>品种更全</text>
					</view>
					
					<view class="tipsItem">
						<text class="iconfont icon-duihao"></text>
						<text>品种更全</text>
					</view>
				</view>
				
				<view class="navMain">
					
					<view class="navMainItem" v-for="nav in navList" :key="nav.id">
						<image :src="nav.icon" mode=""></image>
						<text class="navMainText">{{nav.title}}</text>
					</view>
					
				</view>
				
				<view class="advCard">
					
					<view class="advCardLeft">
						<a href="javascript:;" class="advCardLeftLink">
							<image class="advCardTitleImg" :src="bannerList.mainImg"></image>
							<view class="advCardMain">
								<image :src="bannerListGoods.image" mode=""></image>
								<view class="advCardMainTitle">
									<text class="advCardMainTitleText">{{bannerListGoods.goodsName}}</text>
									<text class="advCardMainTitleTag">{{bannerListGoods.labelName}}</text>
								</view>
							</view>
							<view class="miaosha">
								<image :src="bannerList.priceImg" mode=""></image>
								<view class="miaoshaPrice">{{bannerListGoods.morningPrice}}</view>
							</view>
						</a>
					</view>
					
					<view class="advCardRight">
						<view class="advCardRightTop">
							<image :src="bannerListDetails[0].icon"></image>
							<image :src="bannerListDetails[1].icon"></image>
						</view>
						<image class="advCardRightBottomImg" :src="bannerListDetails[2].icon"></image>
					</view>
				</view>
			
				<view class="mastBuyList">
					
					<view class="mastBuyTitle">
						<image src="../../static/images/dapai.png"></image>
						<text class="mastBuyTitleText">{{advListConfig.title}}</text>
						<text class="mastBuyTitleContent">{{advListConfig.subtitle}}</text>
					</view>
					
					<scroll-view class="mastBuyScroll" scroll-x="true" enable-flex >
						
						<view class="mastBuyItem" v-for="adv in advListGoods" :key="adv.id">
							<image class="mastBuyItemImg" :src="adv.goodsImg" mode=""></image>
							<view class="mastBuyItemTitle">{{adv.goodsName}}</view>
							<view class="mastBuyItemPriceWra">
								<image src="../../static/images/dapai.png" mode=""></image>
								<text class="mastBuyItemPrice"> ￥{{adv.priceMap.salePrice}}</text>
							</view>
							<view class="mastBuyItemOldPrice">{{adv.priceMap.price}}</view>
						</view>
						
					</scroll-view>
					
				</view>
			
				<view class="excellentLazy">
					
					<view class="commonTitleBox">
						<image src="../../static/images/dapai.png" class="commonTitleImg"></image>
						<view class="commonTitle">产源地精选</view>
					</view>
					
					<view class="addressBox">
						
						<scroll-view class="addressScroll" scroll-x="true" enable-flex >
							
							<view class="addressItem" v-for="(address, index) in addressList" :key="address.id" @click="addressCurrentIndex = index">
								<view class="address" :class="{active : index === addressCurrentIndex}" >{{address.mainLabel}}</view>
								<view class="mainItem" :class="{active : index === addressCurrentIndex}" >{{address.subLabel}}</view>
								<view class="arrow" v-show="index === addressCurrentIndex"></view>
							</view>
							
						</scroll-view>
						
						<image :src="addressImg" class="addressIntroduce" mode=""></image>
						
					</view>
					
					
					<view class="itemShowList">
						
						<view class="itemShowListCol">
							
							<view class="itemSingle" v-for="item in showItemListEven" :key="item.sellerGoodsId">
								<image class="bigImg" :src="item.image" mode=""></image>
								<view class="itemContent">
									<view class="title">{{item.title}}</view>
									<view class="priceWra">
										<image class="priceIcon" src="../../static/images/dapai.png" mode=""></image>
										<text class="price"> ￥{{item.salePrice}}</text>
										<text class="oldPrice">{{item.price}}</text>
									</view>
								</view>
							</view>
							
						</view>
						
						
						<view class="itemShowListCol">
							
							<view class="itemSingle" v-for="item in showItemListOdd" :key="item.sellerGoodsId">
								<image class="bigImg" :src="item.image" mode=""></image>
								<view class="itemContent">
									<view class="title">{{item.title}}</view>
									<view class="priceWra">
										<image class="priceIcon" src="../../static/images/dapai.png" mode=""></image>
										<text class="price"> ￥{{item.salePrice}}</text>
										<text class="oldPrice">{{item.price}}</text>
									</view>
								</view>
							</view>
							
						</view>
						
						
					</view>
					
				</view>
				
			</scroll-view>
			
		</view>
		
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import SearchBar from '../components/searchBar/searchBar.vue'
	export default {
		name: 'Index',
		data() {
			return {
				headerNavCurrentIndex: -1,
				addressCurrentIndex: 0,
				headerBgColorInit: ''
			}
		},
		components: {
			SearchBar
		},
		mounted() {
			this.getHeaderNavList()
			this.getSwiperList()
			this.getNavList()
			this.getBannerList()
			this.getAdvList()
			this.getAddressList()
			this.getShowItemList()
		},
		methods: {
			getHeaderNavList() {
				this.$store.dispatch('home/getHeaderNavList')
			},
			getSwiperList() {
				this.$store.dispatch('home/getSwiperList')
			},
			getNavList() {
				this.$store.dispatch('home/getNavList')
			},
			getBannerList() {
				this.$store.dispatch('home/getBannerList')
			},
			getAdvList() {
				this.$store.dispatch('home/getAdvList')
			},
			getAddressList() {
				this.$store.dispatch('home/getAddressList')
			},
			getShowItemList() {
				this.$store.dispatch('home/getShowItemList')
			},
		},
		
		computed: {
			...mapState('home', ['headerNavList', 'swiperList', 'navList', 'bannerList', 'advList', 'addressList', 'showItemList']),
			bannerListGoods() {
				return this.bannerList.goods || {}
			},
			bannerListDetails() {
				return this.bannerList.details || []
			},
			advListGoods() {
				return this.advList.goods || []
			},
			advListConfig() {
				return this.advList.config || {}
			},
			addressImg: {
				get() {
					return (this.addressList[this.addressCurrentIndex] || {}).advImg
				},
				set() {
					
				}
			},
			showItemListEven() {
				return this.showItemList.filter((item, index) => index % 2 === 0)
			},
			showItemListOdd() {
				return this.showItemList.filter((item, index) => index % 2 !== 0)
			},
			headerBgColor: {
				get() {
					return this.headerBgColorInit || (this.swiperList[0] || {}).backgroundColor
				},
				set(val) {
					this.headerBgColorInit = val
				}
			}
		}
	}
</script>

<style lang="less">
.indexContainer {
	position: relative;
	// 顶部背景色
	
	.headerWrapper {
		height: 170upx;
		// background-color: #272f6d;
	}
	
	.header {
		position: fixed;
		left: 0;
		top: 0;
		z-index: 999;
		height: 170upx;
		
		// 头部导航
		.navHeader {
			display: flex;
			justify-content: space-around;
			.scrollHeader {
				display: flex;
				align-items: center;
				width: 648upx;
				height: 80upx;
				line-height: 80upx;
				.scrollHeaderItem {
					padding: 0 15upx;
					flex-shrink: 0;
					color: white;
				}
				.scrollHeaderItemHome {
					padding-left: 30upx;
				}
				.scrollHeaderItem.active {
					font-size: 40upx;
				}
			}
			.icon-duihao {
				font-size: 48upx;
				font-weight: bolder;
				color: #fff;
			}
		}
	}

	.main {
		height: 100%;
		background-color: #eee;
		scroll-view {
			height: calc(100vh - 170upx);
		}
		.bgBox {
			position: absolute;
			left: 0;
			top: 0;
			width: 750upx;
			height: 300upx;
			// background-color: #272f6d;
			.topBgImg {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 750upx;
				height: 120upx;
				background: url(../../static/images/index-slider-bg.5fe4c09.png) bottom no-repeat;
				background-size: contain;
			}
		}
		
		.bannerSwiper {
			width: 750upx;
			height: 300upx;
			margin: 0 auto;
			box-sizing: border-box;
			border-radius: 20upx;
			padding: 20upx;
			image {
				width: 100%;
				height: 300upx;
				margin: 0 auto;
				border-radius: 20upx;
			}
		}
		
		.tips {
			display: flex;
			justify-content: space-around;
			align-items: center;
			height: 90upx;
			background-color: #f0ccab;
			.tipsItem {
				color: #aa784a;
				font-size: 24upx;
				margin-top: 20upx;
				.iconfont {
					color: #aa784a;
					margin-right: 6upx;
				}
			}
		}
	
		.navMain {
			display: flex;
			justify-content: space-around;
			align-items: center;
			padding: 30upx;
			height: 196upx;
			box-sizing: border-box;
			background-color: #fff;
			.navMainItem {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				image {
					width: 88upx;
					height: 88upx;
				}
				text {
					font-size: 24upx;
					color: #aaa;
					padding: 16upx 0 30upx;
				}
			}
		}
		
		.advCard {
			display: flex;
			padding: 10upx 10upx 0 20upx;
			margin-bottom: 20upx;
			
			.advCardLeft {
				border-radius: 10upx;
				background-color: #ddeafd;
				.advCardLeftLink {
					display: flex;
					flex-direction: column;
					padding: 10upx 10upx 20upx 10upx;
					.advCardTitleImg {
						width: 203upx;
						height: 32upx;
						margin-bottom: 15upx;
					}
					.advCardMain {
						display: flex;
						image {
							width: 140upx;
							height: 140upx;
							margin-right: 10upx;
						}
						.advCardMainTitle {
							display: flex;
							flex-direction: column;
							.advCardMainTitleText {
								width: 170upx;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								display: -webkit-box;
								overflow: hidden;
							}
							.advCardMainTitleTag {
								width: 148upx;
								height: 44upx;
								padding: 6upx 10upx;
								margin-top: 12upx;
								box-sizing: border-box;
								background: linear-gradient(to right top, #f78c31, #f9d25c);
								color: #fff;
								font-size: 24upx;
							}
						}
					}
					.miaosha {
						display: flex;
						width: 100%;
						margin-top: 15upx;
						background-color: #f62747;
						border-radius: 10upx;
						color: #fff;
						image {
							width: 130upx;
							height: 50upx;
						}
						.miaoshaPrice {
							
						}
					}
				}
			}
			
			.advCardRight {
				display: flex;
				flex-direction: column;
				margin-left: 10upx;
				.advCardRightTop {
					display: flex;
					image {
						width: 175upx;
						height: 170upx;
						margin: 0 10upx 10upx 0;
					}
				}
				.advCardRightBottomImg {
					width: 360upx;
					height: 112upx;
					margin-right: 10upx;
				}
			}
		}
		
		.mastBuyList {
			height: 500upx;
			padding-bottom: 40upx;
			margin-bottom: 20upx;
			background-color: #fff;
			
			.mastBuyTitle {
				display: flex;
				align-items: center;
				height: 100upx;
				padding: 0 20upx;
				image {
					width: 40upx;
					height: 40upx;
					margin-right: 20upx;
				}
				.mastBuyTitleText {
					font-size: 40upx;
					font-weight: bolder;
				}
				.mastBuyTitleContent {
					font-size: 24upx;
					color: #aaa;
					margin-left: 20upx;
				}
			}
			
			.mastBuyScroll {
				display: flex;
				height: 360upx;
				.mastBuyItem {
					display: flex;
					flex-direction: column;
					margin-left: 20upx;
					width: 210upx;
					height: 360upx;
					.mastBuyItemImg {
						width: 210upx;
						height: 210upx;
					}
					.mastBuyItemTitle {
						font-size: 24upx;
						color: #aaa;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
						margin: 10upx 0;
					}
					.mastBuyItemPriceWra {
						image {
							width: 28upx;
							height: 32upx;
						}
						.mastBuyItemPrice {
							color: #fa210a;
							margin-left: 8upx;
						}
					}
					.mastBuyItemOldPrice {
						font-size: 24upx;
						color: #aaa;
						text-decoration: line-through;
					}
				}
			}
		}
	
		.excellentLazy {
			.commonTitleBox {
				background-color: #fff;
				display: flex;
				align-items: center;
				padding: 20upx;
				height: 100upx;
				box-sizing: border-box;
				image {
					width: 40upx;
					height: 40upx;
					margin-right: 20upx;
				}
				.commonTitle {
					font-size: 40upx;
					font-weight: bold;
				}
			}
			
			.addressBox {
				background-color: #fff;
				height: 312upx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				align-items: center;
				.addressScroll {
					display: flex;
					height: 112upx;
					.addressItem {
						position: relative;
						font-size: 24upx;
						flex-shrink: 0;
						margin: 0 8upx;
						.address {
							height: 40upx;
							line-height: 40upx;
							padding: 0 16upx;
							background-color: #aaa;
							border-radius: 30upx;
							color: white;
						}
						.mainItem {
							text-align: center;
							color: #aaa;
						}
						.arrow {
							position: absolute;
							left: 40%;
							bottom: 0;
							width: 0;
							height: 0;
							z-index: 9999;
							border-top: #fff solid 16upx;
							border-left: transparent solid 12upx;
							border-right: transparent solid 12upx;
							margin-top: 50upx;
						}
						.address.active {
							color: #fff;
							background-color: #fa210a;
						}
						.mainItem.active {
							color: #fa210a;
						}
					}
				}
				
				.addressIntroduce {
					margin-top: -30upx;
					width: 750upx;
					height: 200upx;
				}
				
			}

			
			.itemShowList {
				display: flex;
				padding-top: 20upx;
				.itemShowListCol {
					width: 50%;
					box-sizing: border-box;
					margin-left: 20upx;
					.itemSingle {
						border-radius: 30upx;
						background-color: #fff;
						margin-bottom: 20upx;
						.bigImg {
							width: 305upx;
							height: 305upx;
							margin-left: 24upx;
						}
						.itemContent {
							padding: 20upx;
							.title {
								font-size: 24upx;
								color: #aaa;
								margin-bottom: 15upx;
							}
							.priceWra {
								.priceIcon {
									width: 28upx;
									height: 32upx;
								}
								.price {
									color: #fa210a;
								}
								.oldPrice {
									margin-left: 10upx;
									color: #aaa;
									text-decoration: line-through;
									font-size: 24upx;
								}
							}
						}
					}
				}
			}
		}
	}
}
</style>
